<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<div id="headerApp">

    <a id="loginBtn" data-toggle="modal" data-target="#loginModel" style="cursor: pointer;">登录</a>

    <!-- Modal -->
    <div class="modal fade" id="loginModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">用户登录</h4>
                </div>
                <div class="modal-body">
                    <form id="pwdLoginForm" action="#" method="post">
                        <input type="hidden" name="action" value="pwdLogin">
                        <div class="modal-body">
                            <div class="form-group">
                                <label>用户名</label>
                                <input type="text" class="form-control" v-model="user.username" id="login_username" name="username"
                                       placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" v-model="user.password" id="login_password" name="password"
                                       placeholder="请输入密码">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="btnClose" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input type="reset" class="btn btn-primary" value="重置">
                    <input type="button" v-on:click="login()" id="pwdLogin" class="btn btn-primary" value="登录"/>
                    <input type="button" v-on:click="closeLogin()"  class="btn btn-primary" value="关闭"/>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#headerApp",
        data:{
            user:{},
            username:""
        },
        methods:{
            login(){
                axios.post("/user?action=login" , this.user).then(resp=>{
                    if(resp.data == "ok"){
                        //$('#loginModel').modal('hide');

                        //this.getUsername();//获得登录名称
                        location.reload();
                    }
                })
            },
            getUsername(){
                //alert("校验用户是否登录成功")
                axios.get("/user?action=checkUserLogin").then(resp=>{
                    if(resp.data != "1"){
                        this.username= resp.data.username;
                        console.log(this.username)
                        //$('#loginModel').modal('hide');
                        //$("#loginModel").modal("hide");
                        //$('#btnClose').click();

                    }
                })
            },
            loginOut(){
                if(confirm("是否退出?")){
                    axios.get("/user?action=loginOut").then(resp=>{
                        location.reload();
                    })
                }
            },
            closeLogin(){
                $('#btnClose').click();
                //$('#loginModel').modal('hide');
            }
        },
        created(){
            this.getUsername();
        }
    })
</script>